<template>
  <div class="login-container">
    <!-- 轮播图 -->
    <van-swipe :autoplay="10000" :duration="1500" :show-indicators="false">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image" alt="" style="width: 100%; height: 100%;" />
      </van-swipe-item>
    </van-swipe>
    <div class="wrap">
      <div>
        <div class="content">
          <h2><b>篮海之家</b></h2>
          <div class="inp">
            <van-icon name="manager" />
            <input
              v-model="formData.user_name"
              type="text"
              placeholder="邮箱"
            />
          </div>
          <div class="inp">
            <van-icon name="lock" />
            <input v-model="formData.password" type="text" placeholder="密码" />
          </div>
          <div class="inp" v-if="show">
            <van-icon name="lock" />
            <input v-model="password" type="text" placeholder="密码确认" />
          </div>
          <div class="check">
            <div class="inp">
              <van-icon name="checked" />
              <input v-model="formData.code" type="text" placeholder="验证码" />
            </div>
            <img :src="codeImg" alt="" @click="getCode" />
          </div>
          <van-button :loading="loading" type="info" @click="login">{{
            show ? "注册" : "登录"
          }}</van-button>
          <div class="otherfun">
            <a @click="switchRegister">{{ show ? "登录" : "注册" }}</a>
            <a v-show="!show">忘记密码</a>
          </div>
          <div class="agr">
            <van-checkbox v-model="checked">我已阅读并同意</van-checkbox>
            <a>{{ common.userServiceAgreement }}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { get_verifyCode, register, login } from "@/services/user";
import { setAuthorization, checkAuthorization } from "@/utils/request";
export default {
  name: "Login",
  data() {
    return {
      show: false,
      checked: false,
      loading: false,
      codeImg: "",
      password: "",
      showText: "注册",
      images: [
        require("@/assets/images/login_banner1.jpg"),
        require("@/assets/images/login_banner2.jpg"),
      ],
      formData: {},
    };
  },
  created() {
    if (checkAuthorization()) this.$router.push("/home");
    else this.getCode();
  },
  methods: {
    // 获取验证码
    getCode() {
      get_verifyCode().then((res) => {
        if (res && res.data) this.codeImg = res.data.codeImg;
      });
    },
    async login() {
      if (this.checked) {
        // 登录
        if (!this.show) {
          if (this.checkParams()) {
            this.loading = true;
            this.$toast.loading({
              message: "正在登录",
              duration: 0,
            });
            login(this.formData)
              .then((res) => this.afterLogin(res))
              .catch(() => {
                this.loading = false;
                this.getCode();
              });
          }
        }
        // 注册
        else {
          if (this.checkParams("register")) {
            this.loading = true;
            this.$toast.loading({
              message: "正在注册",
              duration: 0,
            });
            register(this.formData)
              .then((res) => this.afterLogin(res))
              .catch(() => {
                this.loading = false;
                this.getCode();
              });
          }
        }
      } else {
        this.$toast("请先勾选" + this.common.userServiceAgreement);
        return;
      }
    },
    // 参数检验
    checkParams(type) {
      let flag = true;
      const validate = this.validate;
      if (
        !validate.isNull(this.formData.user_name, "邮箱不能为空") ||
        !validate.isEmail(this.formData.user_name) ||
        !validate.isNull(this.formData.password, "密码不能为空") ||
        !validate.isPassword(this.formData.password) ||
        !validate.isNull(this.formData.code, "验证码不能为空")
      ) {
        flag = false;
        this.$toast(validate.error);
      }
      if (flag && type === "register") {
        if (!validate.isNull(this.password, "请再次输入密码")) {
          flag = false;
          this.$toast(validate.error);
        } else if (this.formData.password !== this.password) {
          flag = false;
          this.$toast("两次输入密码不一致");
        }
      }
      return flag;
    },
    // 登录注册界面切换
    switchRegister() {
      this.show = !this.show;
      Object.assign(this, {
        formData: {},
        codeImg: "",
        password: "",
        checked: false,
      });
      this.getCode();
    },
    afterLogin(res) {
      this.loading = false;
      if (!this.show) {
        if (res) {
          if (res.code === 200) {
            setAuthorization({
              token: res.data.token,
              expireAt: 1, // 失效时间是1天后
              // expireAt: new Date(new Date().getTime() + 2 * 60 * 60 * 1000) // 失效时间是2小时后
            });
            this.$toast.success(res.msg);
            setTimeout(() => {
              this.$router.push("/home");
            }, 2000);
          } else this.$toast.fail(res.msg);
        }
      } else {
        if (res.code === 200) {
          this.$toast.success(res.msg);
          setTimeout(() => {
            this.switchRegister();
          }, 2000);
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  .wrap {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    & > div {
      background: rgba(229, 229, 229, 0.4);
      width: 84%;
      min-width: 350px;
      max-width: 400px;
      height: fit-content;
      border-radius: 16px;
      display: flex;
      align-items: center;
      justify-content: center;
      .content {
        width: 80%;
        & > *:not(:first-child) {
          margin-bottom: 20px;
        }
        h2 {
          letter-spacing: 6px;
          text-align: center;
        }
        .inp {
          padding: 8px;
          border-radius: 10px;
          background: rgba(255, 255, 255, 0.4);
          color: #999;
          border: 1px solid #999;
          display: flex;
          align-items: center;
          input {
            margin-left: 8px;
            width: 100%;
            border: none;
            background: transparent;
            letter-spacing: 2px;
          }
        }
        .check {
          display: flex;
          justify-content: space-between;
          div:nth-child(1) {
            width: 50%;
          }
          img {
            border-radius: 16px;
          }
        }
        .otherfun {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 10px;
          color: #333;
        }
        .agr {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 10px;
          /deep/ .van-checkbox__icon {
            font-size: 14px;
          }
        }
      }
    }
  }
}
.van-swipe-item {
  height: 100vh !important;
}
.van-icon {
  font-size: 22px;
}
.van-button {
  width: 100%;
  border-radius: 10px;
  letter-spacing: 20px;
  font-size: 16px;
  background: rgba(25, 137, 250, 0.8);
}
input::-webkit-input-placeholder {
  color: #999;
}
</style>